<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>Examples</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <link href="" rel="stylesheet" />
</head>

<body>
  <div id="root">
    <!-- 数组遍历渲染 -->
    <!-- <ul>
      <li v-for="(li ,index) in list">
        <span v-for="(item,idx) in li">
          {{item}}
        </span>
      </li>
    </ul> -->
    <!-- 对象遍历渲染 -->
    <!-- <ul>
      <li v-for="value, key, index in obj"> 
                  不加括号语法也是允许的
       {{key}} - {{value}} - {{index}}
      </li>
    </ul> -->
    <!-- <my-header v-for="(li,index) in list2" :key="li">
      {{li}}
    </my-header> -->
    <!-- <ul>
      <li v-for="li in list3">{{li}}</li>
    </ul> -->
    <!-- <div v-for="n, i in 10">{{n}}&emsp;{{i}}</div> -->
    <!-- <div v-for="item in 'abcdef'">{{item}}</div> -->

    <template v-for="n in 10">
      <div>hello</div>
      <div>world</div>
    </template>
  </div>
  <script src="../vue.js"></script>
  <script>
    // 定义组件
    const myHeader = {
      template: `<h1>header</h1>`
    }
    var vm = new Vue({
      el: "#root",
      data: {
        list: [
          ['a', 'b', 'c'],
          ['d', 'e', 'f']
        ],
        list2: [
          'a', 'b', 'c', 'd', 'e'
        ],
        obj: {
          x: 'a',
          y: 'b',
          z: 'c'
        },
      },
      computed: {
        list3() {
          return this.list2.filter((value, index) => index % 2 === 0)
        }
      },
      components: {
        'my-header': myHeader
      }
    })
    // 去掉run...提示
    Vue.config.productionTip = false;
  </script>
</body>

</html>